<script setup>
import { ref, defineProps } from 'vue'
const props = defineProps(['navBar', 'navList'])
const { navBar, navList } = props

const emit = defineEmits(['clickNavBar'])

// 点击tab
const clickNavBar = (item) => {
  emit('clickNavBar', item)
}
</script>
<template>
  <div class="card">
    <div class="conbox">
      <div class="navbox">
        <p
          v-for="(item, index) in navList"
          :key="index"
          :class="{ active: props.navBar === item }"
          @click="clickNavBar(item)"
        >
          {{ item }}
        </p>
      </div>
    </div>
  </div>
</template>
<style scoped lang="scss">
.card {
  .conbox {
    padding: 2px 15px 10px;
    .navbox {
      display: flex;
      align-items: center;

      p {
        flex: 1;
        padding: 5px 0;
        font-size: 15px;
        text-align: center;
        cursor: pointer;
        color: #85b9cb;
        &.active {
          color: #fff;
          position: relative;
          background: linear-gradient(to bottom, #00e2ff 0%, #00d8aa 100%);
        }
      }
    }
  }
}
</style>
